<template>
  <div>
    <div v-show="show?true:false" class="filmTop">
      <van-nav-bar title="电影">
        <template #left>
          <van-button style="border:none;" type="default" to="/city" class="topcitybutton">
            {{$store.state.cityName}}
          </van-button>
          <span class="sanjiao"></span>
        </template>
      </van-nav-bar>
      <van-tabbar v-model="active" :fixed="false" active-color="red" inactive-color="black" route>
        <van-tabbar-item class="fontSize" to="/home/film/showing" @click="hostTrue">正在热映</van-tabbar-item>
        <van-tabbar-item class="fontSize" to="/home/film/coming" @click="soonFalse">即将上映</van-tabbar-item>
      </van-tabbar>
    </div>
    <van-button round type="info" class="cityButton" size="small" to="/city">
      {{$store.state.cityName}}
      <van-icon name="arrow-down" />
    </van-button>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="item in bannerData" :key="item.bannerId">
        <img :src="item.imgUrl" style="width:100%" />
      </van-swipe-item>
    </van-swipe>
    <van-tabbar v-model="active" :fixed="false" active-color="red" inactive-color="black" route>
      <van-tabbar-item class="fontSize" to="/home/film/showing" @click="hostTrue">正在热映</van-tabbar-item>
      <van-tabbar-item class="fontSize" to="/home/film/coming" @click="soonFalse">即将上映</van-tabbar-item>
    </van-tabbar>
    <router-view></router-view>
  </div>
</template>
<script>
import { filmBanner } from "../api/api.js";
export default {
  props: [],
  data() {
    return {
      active: 0,
      show: false,
      bannerData: []
    };
  },
  computed: {},
  methods: {
    hostTrue() {
      this.$emit("hostflag", true);
    },
    soonFalse() {
      this.$emit("hostflag", false);
    },
    nav(data) {
      console.log(data);
      this.navData.forEach(item => {
        item.active = false;
      });
      this.navData[data.id].active = true;
    },
    topShow() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 200) {
        this.show = true;
      } else {
        this.show = false;
      }
    }
  },
  components: {},
  filters: {},
  watch: {},
  created() {
    filmBanner().then(res => {
      this.bannerData = res.data.data;
    });
  },
  beforeMount() {},
  mounted() {
    window.addEventListener("scroll", this.topShow);
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {}
};
</script>
<style scoped>
.filmTop {
  position: fixed;
  width: 100%;
  z-index: 99;
}
.sanjiao{
  border: 5px solid transparent;
  border-top: 5px solid black;
  vertical-align: bottom;
  display: inline-block;
}
.cityButton {
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: rgba(154, 105, 114, 0.5);
  z-index: 10;
  border: none;
}
.topcitybutton>div>span:first-of-type{
  width: 80px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fontSize {
  font-size: 18px;
}
</style>